<template>
	<view class="content">
		
		<div class="head_wrap" :style="[{'padding-top': (statusBarHeight)}]">
			<image src="../../../static/img/my_head_bg.png" mode="aspectFill" class="vip_img" />
			<div class="title">我的</div>
			<div class="head_img_wrap">
				<image :src="userHead" mode="aspectFill" class="image"></image>
				<div class="name_wrap">
					<span v-if="isLogin && phone">{{phone}}</span>
					<span v-if="!isLogin" style="font-weight: bold;">登录趣读财经，体验更多功能</span>
					<span v-if="!isLogin" class="login_btn" @click="goToVip">登录</span>
				</div>
				<image src="../../../static/img/kefu_icon.png" mode="aspectFill" class="kefu" @click="goToKeFu"/>
			</div>
		</div>
		
		<div class="account_wrap row_between" @click="goToWallet" v-if="hideFunc">
			<div class="row">
				<image src="../../../static/img/zhanghu_icon.png" mode="aspectFill" class="icon"/>
				<span>账户余额</span>
			</div>
			
			<div class="">
				<image src="../../../static/img/qian_icon.png" mode="aspectFill" class="unit_icon" v-if="isLogin"/>
				<span class="money_qian" v-if="isLogin && balance[0]">{{balance[0]}}</span>
				<span class="money_dian" v-if="isLogin && balance[1]">.{{balance[1]}}</span>
				<span class="arraw"></span>
			</div>
		</div>
		
		
			
		<div class=" bottom_item_wrap"  :style="{'margin-top':(index==0?'50upx':'30upx')}" v-for="(item, index) in menuList"
				:key="index" @click="menuClick(index)" v-if="hideFunc && menuList">
			<div class="row_between bottom_item" >
				<image :src="item.icon" class="icon" mode="aspectFill" />
				<div class="col_between">
					<span class="text">{{item.title}}</span>
					<span class="info">{{item.desc}}</span>
				</div>
				
				<span style="flex: 1;"></span>
				<span class="arraw"></span>
			</div>
		</div>
		
		<navigator class=" bottom_item_wrap" url="../../kefu/kefu">
			<div class="row_between bottom_item" >
				<image src="../../../static/img/lianxi_icon.png" class="icon" mode="aspectFill" />
				<div class="col_between">
					<span class="text">联系客服</span>
					<span class="info">我们在这里耐心为你解答问题</span>
				</div>
				
				<span style="flex: 1;"></span>
				<span class="arraw"></span>
			</div>
		</navigator>
		
		<div class=" bottom_item_wrap" @click="goToLogout" v-if="isLogin">
			<div class="row_between bottom_item uni-navigate-right">
				<image src="../../../static/img/tuichu_icon.png" class="icon" mode="aspectFill" />
				<span>退出登录</span>
				<span style="flex: 1;"></span>
				<span class="arraw"></span>
			</div>
		</div>
		
	</view>
</template>

<script>
	import { BASE_URL,userCenter,userinfo,userMenu } from '@/utils/api'
	
	export default {
		data() {
			return {
				statusBarHeight: '80upx',
				vipTop: 0,
				userName: '未登录',
				userHead: '../../../static/img/login_head.png',
				isLogin: false,
				phone: '',
				balance: [],
				menuList:[],
				hideFunc: true,
				balanceMoney: ''
			}
		},
		onPullDownRefresh(){
			this.userMenu();
			let auth_token = uni.getStorageSync("auth_token");
			if(auth_token){
				this.isLogin = true;
				this.userHead = '../../../static/img/login_head.png';
				this.userCenter();
			}else{
				this.isLogin = false;
				this.userHead = '../../../static/img/nologin_head.png';
			}
		},
		onLoad() {
			this.userMenu();
		},
		onShow(){
			let auth_token = uni.getStorageSync("auth_token");
			if(auth_token){
				this.isLogin = true;
				this.userHead = '../../../static/img/login_head.png';
				this.userCenter();
			}else{
				this.isLogin = false;
				this.userHead = '../../../static/img/nologin_head.png';
			}
			let hideFunc = uni.getStorageSync("hideFunc");
			this.hideFunc = hideFunc == 0;
			console.log(this.hideFunc);
			console.log(hideFunc);
			
		},
		methods: {
			async userCenter(){
				let res = await userCenter();
				if(res.code == 1){
					this.phone = res.data.userPhone;
					this.balanceMoney = res.data.balance;
					this.balance = parseFloat(res.data.balance).toFixed(2).split(".");
					console.log(this.balance);
				}
				uni.stopPullDownRefresh();
				
			},
			async userMenu(){
				let res = await userMenu();
				if(res.code == 1){
					this.menuList = res.data;
					this.$forceUpdate();
				};
				console.log(JSON.stringify(this.menuList));
				uni.stopPullDownRefresh();
				
			},
			goToKeFu(){
				uni.navigateTo({
					url: '/pages/kefu/kefu'
				});
			},
			menuClick(index){
				
				if(this.getUrlQueryString(this.menuList[index].url, "needlogin") == 1){
					// 需要登录
					let auth_token = uni.getStorageSync("auth_token");
					if(auth_token){
						// 可以登录
						if(this.getUrlQueryString(this.menuList[index].url, "hidehead") == 1){
							// 需要隐藏头
							uni.setStorageSync("couponUrl", this.menuList[index].url);
							uni.navigateTo({
								url: '/pages/tixian_webview/tixian_webview?url='+this.menuList[index].url
							});
						}else{
							uni.navigateTo({
								url: '/pages/home_webview/home_webview?url='+this.menuList[index].url
							});
						}
					}else{
						uni.navigateTo({
							url: '/pages/get_code/get_code'
						});
					}
				}else{
					// 不需要登录
					if(this.getUrlQueryString(this.menuList[index].url, "hidehead") == 1){
						// 需要隐藏头
						uni.setStorageSync("couponUrl", this.menuList[index].url);
						uni.navigateTo({
							url: '/pages/tixian_webview/tixian_webview?url='+this.menuList[index].url
						});
					}else{
						uni.navigateTo({
							url: '/pages/home_webview/home_webview?url='+this.menuList[index].url
						});
					}
				}
				
				// let needLogin = this.menuList[index].needLogin;
				// if(needLogin == 1){
				// 	if(!this.isLogin){
				// 		uni.navigateTo({
				// 			url: '/pages/get_code/get_code'
				// 		});
				// 	}else{
				// 		uni.navigateTo({
				// 			url: '/pages/home_webview/home_webview?url='+this.menuList[index].url
				// 		});
				// 	}
				// }else{
				// 	uni.navigateTo({
				// 		url: '/pages/home_webview/home_webview?url='+this.menuList[index].url
				// 	});
				// }
				
			},
			goToWallet: function(){
				let auth_token = uni.getStorageSync("auth_token");
				if(auth_token){
					uni.navigateTo({
						url: '/pages/balance/balance?balance='+this.balanceMoney
					});
				}else{
					uni.navigateTo({
						url: '/pages/get_code/get_code'
					});
				}
				
				// uni.navigateTo({
				// 	url: '/pages/bind_wallet/bind_wallet'
				// });
			},
			goToVip: function(){
				uni.navigateTo({
					url: '/pages/get_code/get_code'
				});
				
			},
			goToLogout: function(){
				uni.showModal({
					title: '提示',
					content:"确定退出登录吗?",
					confirmText:'确定',
					cancelText:'取消',
					confirmColor:'#000000',
					cancelColor:'#999999',
					success: (res) => {
						if (res.confirm) {
							// #ifdef APP-PLUS
								plus.navigator.removeAllCookie();
							// #endif
							uni.removeStorageSync("auth_token");
							this.isLogin = false;
							this.userHead = '../../../static/img/nologin_head.png';
						} else if (res.cancel) {
						}
					}
				})
			},
			getUrlQueryString(url, name) {
				var reg = new RegExp("[?&]" + name + "=([^&#]*)", "i");
				var res = url.match(reg);
			 
				if( res && res.length>1 ){
					return decodeURIComponent(res[1]);
				}
				return '';
			}
		}
	}
</script>

<style>
	page{background: #fff;}
	
	.head_wrap{width: 100%; box-sizing: border-box; height: 400upx;position: relative; }
	.head_wrap .vip_img{width: 100%;position: absolute; top:0upx; z-index: 1;height: 400upx;}
	.head_wrap .head_img_wrap{display: flex; flex-direction: row;align-items: center;position: relative;z-index: 2; padding: 0upx 20upx;color: #fff;font-size: 32upx; }
	.head_wrap .head_img_wrap .image{width: 110upx; height: 110upx; border-radius: 50%;}
	.head_wrap .title{font-weight: bold;text-align: center; height: 50upx; line-height: 50upx; position: relative;z-index: 1; color: #333333; font-size: 36upx; margin-bottom: 40upx;}
	.head_wrap .name_wrap{flex: 1; display: flex;flex-direction: column;margin-left: 20upx; color: #333; font-size: 32upx;z-index: 10;}
	.head_wrap .name_wrap .login_btn{width: 160upx; text-align: center; height: 48upx; line-height: 48upx; background: #333333;color: #FFCA0A; font-size: 26upx; border-radius: 8upx; margin-top: 20upx;}
	.head_wrap .kefu{width: 48upx; height: 48upx;}
	
	.account_wrap{padding: 0upx 46upx; margin: -60upx 30upx 0upx; box-shadow: 0px 0px 20upx 0px #EAEAEA; border-radius: 12upx; height: 120upx; position: relative;z-index: 2;background: #fff;;}
	.account_wrap .icon{ width: 48upx; height: 48upx; margin-right: 16upx;}
	.account_wrap .unit_icon{ width: 18upx; height: 24upx; margin-right: 6upx;}
	.account_wrap .money_qian{font-size: 48upx; color: #FE4444;}
	.account_wrap .money_dian{font-size: 24upx; color: #FE4444;}
	
	.my_head_wrap{padding: 0upx 20upx; color: #333333; font-size: 28upx;}
	.touxiang{width: 72upx;margin-right: 20upx; border-radius: 50%;}
	.setting_img{width: 40upx;}
	.func_wrap{flex-flow: wrap; width: 100%; padding: 0upx 30upx; box-sizing: border-box; margin-top: 40upx;}
	.func_wrap img{width: 60upx;margin-bottom: 10upx;}
	.func_item{color: #333333; font-size: 28upx; height: 168upx; flex:1;border: 2upx solid #F3F3F3; margin: 10upx 10upx 0upx;border-radius: 8upx;}
	.bottom_item_wrap{padding-left: 40upx;width: 100%; box-sizing: border-box; margin-top: 30upx;}
	.bottom_item{color: #333333; font-size: 28upx; height: 116upx;  padding-right: 30upx;}
	.bottom_item .icon{ margin-right: 24upx; width: 48upx; height: 48upx;}
	.bottom_item .text{color: #261900; font-size: 30upx;}
	.bottom_item .info{color: #8F8F8F; font-size: 22upx;}
	
	
</style>
